<script setup lang="ts">
import { computed, ref, shallowRef, watch } from "vue";
import type { GenericEnvStore } from "@/modules/dev-env/store/generic-env-store.ts";
import type { BaseEnvMirror } from "@/modules/dev-env/mirror/mirror.ts";
import { setProp } from "@/framework/util/objects.ts";
import GenericEnvInstallMirror from "@/modules/dev-env/view/generic-env-install-mirror.vue";
import { CloudDownloadOutlined } from "@ant-design/icons-vue";
import DialogWindow from "@/components/framework/dialog-window.vue";
import { hc } from "@/framework/vue/util/render.ts";

const { open, store } = defineProps<{
  open?: boolean;
  store: GenericEnvStore<any>;
}>();

const emits = defineEmits<{
  (e: "update:open", open: boolean): void;
}>();

const modalOpen = computed({
  get: () => open,
  set: open => emits("update:open", open),
});

const activeKey = ref<string>();
const websites = shallowRef<Dict<string>>({});
const mirrorList = shallowRef<BaseEnvMirror[]>([]);

watch(modalOpen, isOpen => {
  if (isOpen) {
    mirrorList.value = store.getMirrors();
    activeKey.value = mirrorList.value[0]?.id;
    websites.value = mirrorList.value.reduce((acc, mirror) => setProp(acc, mirror.id, mirror.website), {} as Dict<string>);
  }
});
</script>

<template>
  <dialog-window v-model:open="modalOpen" :icon="hc(CloudDownloadOutlined)" title="安装" width="950px" destroy-on-close :footer="null">
    <a-tabs v-model:active-key="activeKey" size="small" :tab-bar-style="{ padding: '0 10px' }">
      <a-tab-pane v-for="it in mirrorList" :key="it.id" :tab="it.name">
        <generic-env-install-mirror :store="store" :mirror="it" @cancel="modalOpen = false" />
      </a-tab-pane>
    </a-tabs>
  </dialog-window>
</template>
